<template>
	<view class="page l_pages" :style="skin">
		<jnavbar :title="'申请售后'"></jnavbar>
		<scroll-view class="box page_container" scroll-y>
			<u-gap height="26" bg-color="#f4f4f4"></u-gap>
			<view class="good_div">
				<text class="title">退款商品</text>
				<block v-for="(item, i) in list" :key="i">
					<view class="goodinfo pd">
						<view class="uni-flex-row uni-flex-title">
							<vimage class="img_box" :src="item.commodity.master" mode=""></vimage>
				
							<view class="goods_content uni-flex-column">
								<text class="u-main-color u-line-2">{{ item.commodity.name }}</text>
								<text class="u-tips-color u-line-1" v-if="item.sku">{{ item.sku.pvs_value || '' }}</text>
							</view>
							<view class="goods_price uni-flex-column">
								<text>￥{{ item.price }}x{{ item.count }}</text>								
							</view>
						</view>
						<view v-if="item.attachlist" v-for="(data, i) in item.attachlist" class="u-content-color u-flex u-row-between u-font-sm u-margin-top-20">
							<text>{{ data.attach_value }}</text>
							<text>&yen;&nbsp;{{ data.attach_price }}x{{ item.count }}</text>
						</view>
					</view>
				</block>
			</view>
			<view class="good_div">
				<text class="title">退款信息</text>
				<view class="goodinfo" v-if="type == 1 || type == 2">
					<view class="item uni-flex-row uni-flex-title">
						<view class="uni-flex-column">
							<text>退款金额</text>
							<text class="freight">可修改,最多￥{{ defmoney }}{{ id == 'all' ? ',含发货邮费' + orderdetail.freight : '' }}</text>
						</view>
						<input class="num" type="digit" @input="chengnum" :placeholder="'￥' + defmoney" placeholder-style="font-size:34rpx;color:#FF4206;" v-model="money" />
					</view>
				</view>
			</view>
			<view class="good_div">
				<text class="title">补充描述和凭证</text>
				<view class="goodinfo bg">
					<u-gap height="26" bg-color="#FBFAFA"></u-gap>
					<textarea
						placeholder-class="text_pla"
						:maxlength="200"
						:auto-height="true"
						class="explain"
						placeholder="补充描述，有助于商家更好的处理售后问题"
						v-model="explain"
					></textarea>
					<text class="max_num">{{ explain.length }}/200</text>
					<uploadimg @getimg="getimg"></uploadimg>
				</view>
			</view>
		</scroll-view>

		<view class="footer"><u-button type="primary" :custom-style="customStyle" class="btns" @click="applyaftersale">提交</u-button></view>
	</view>
</template>

<script>
import uploadimg from '@/components/upload/upload.vue';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			list: [],
			img_urls: [],
			explain: '',
			money: 0,
			type: 1,
			defmoney: 0,
			orderdetail: {},
			customStyle: {
				width: '701rpx',
				height: '80rpx',
			
				'border-radius': '40rpx',
				color: '#FFFFFF'
			}
		};
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},
	components: {
		uploadimg
	},
	async onLoad(e) {
		await this.$getWx
		this.id = e.id;
		this.oid = e.oid;
		this.type = e.type;
		this.getdetail(e.oid);
	},
	methods: {
		chengnum(e) {
			let num = e.detail.value;
			if (Number(num) - this.defmoney > 0) {
				uni.showToast({
					title: '退款金额不能超过支付金额！',
					icon: 'none'
				});
				this.money = '';
			}
		},
		getimg(imglist) {
			this.img_urls = imglist;
		},
		applyaftersale() {
			let ids = [];
			this.list.forEach(a => {
				ids.push(a.id);
			});
			let params = {
				type: this.type,
				order_id: this.oid,
				ids: JSON.stringify(ids),
				explain: this.explain,
				reason: '',
				money: this.money ? this.money : this.defmoney,
				imgs: JSON.stringify(this.img_urls)
			};
			if (this.id == 'all') {
				params.after_type = 1;
			} else {
				params.after_type = 2;
			}
			this.$http('/aftersale/apply', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					this.Jumpurl(
						{
							link: 'aftersale_detail?id=' + res.data.msg.id,
							type: 1,
							login_type: 2
						},
						'redirect'
					);
				} else {
					uni.showToast({
						title: res.data.error_msg,
						icon: 'none'
					});
				}
			});
		},

		//订单详情
		getdetail(id) {
			this.$http('/order/readOrder/' + id, {}, 'GET').then(res => {
				if (res.statusCode == 200) {
					this.orderdetail = res.data.msg;
				if (this.orderdetail.attach && this.orderdetail.attach.length > 0) {
					this.orderdetail.order_commodity.forEach(item => {
						item.attachlist = [];
						if (item.attach_value) {
							this.orderdetail.attach.forEach(a => {
								if (item.attach_value.indexOf(a.attach_value) > -1 && item.attachlist.findIndex(_ => _.attach_value == a.attach_value) == -1) {
									item.attachlist.push(a);
								}
							});
						}
					});
				}
					if (this.id == 'all') {
						this.list = this.orderdetail.order_commodity;
						let orderdetail = this.orderdetail;
						if (orderdetail.order_type == 3) {
							orderdetail.money = Number(orderdetail.money) - Number(orderdetail.distribution_fee);
							orderdetail.freight = orderdetail.distribution_fee.toFixed(2);
						}
						let allprice =
							(Number(orderdetail.money) * 1000 -
								Number(orderdetail.discount) * 1000 -
								Number(orderdetail.discount_amount) * 1000 +
								Number(orderdetail.freight) * 1000) /
							1000;
						this.money = this.orderdetail.pay_money;
						// this.money = this.orderdetail.money;
					} else {
						let detail = this.orderdetail.order_commodity.filter(_ => {
							return _.id == this.id;
						});
						let data = detail[0];
						this.list.push(data);
						// if (this.orderdetail.order_type == 3) {
						// 	data.pay_money = Number(data.price) * Number(data.count);
						// }
						// if (this.orderdetail.attach && this.orderdetail.attach.length > 0) {
						// 	let attachlist=this.orderdetail.attach.filter(_ => _.commodity_id == data.id);
						// 	if(data.sku_id){
						// 		attachlist = this.orderdetail.attach.filter(_ => _.commodity_id == data.id && _.sku_id == data.sku_id);
						// 	}

						// 	attachlist.forEach(a => {
						// 		data.money += Number(a.attach_price) * Number(a.num);
						// 	});
						// }
						this.money = data.pay_money;
					}
					this.defmoney = this.money;
				} else {
					uni.showToast({
						title: res.data.error_msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.box {
	height: calc(100vh - 100rpx);
}
.good_div {
	width: 718rpx;
	// height: 293px;
	background: #ffffff;
	border-radius: 20rpx;
	margin-left: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	.title {
		display: block;
		padding: 24rpx;
		font-size: 32rpx;
	}
}
.goodinfo {
	width: 718rpx;
	background-color: #fff;
	// margin: 0rpx 32rpx;
	padding: 0 20rpx;
	margin: 0 auto;
	font-size: 30rpx;
	&.bg {
		width: 667rpx;
		// height: 280rpx;
		background: #fbfafa;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.text_pla {
			font-size: 26rpx;
			font-weight: 500;
			color: #939396;
		}
		.explain {
			width: 619rpx;
			margin: 0 auto;
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			height: 68rpx;
		}
		.max_num {
			float: right;
			font-size: 26rpx;
			font-weight: 500;
			color: #c8c8c8;
		}
	}
	.img_box {
		width: 180rpx;
		height: 180rpx;
		border-radius: 6rpx;
		margin-right: 26rpx;
	}
	.info_text {
		flex: 1;
		font-size: 28rpx;
		justify-content: space-between;
		height: 180rpx;
		.u-line-2 {
			font-size: 26rpx;
			color: #333333;
			line-height: 46rpx;
			height: 92rpx;
		}
		.sm-font {
			font-size: 24rpx;
			color: #d1d1d1;
		}
	}

	.item {
		padding: 20rpx 0;
		input {
			width: 120rpx;
			text-align: right;
		}
		.freight {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.num {
		font-size: 34rpx;
		color: #ff4206;
		font-weight: bold;
		line-height: 72rpx;
		height: 72rpx;
	}
	.evanswitch {
		transform: scale(0.6);
	}
}
.line {
	width: 100%;
	height: 1rpx !important;
	background-color: #f5f5f5;
	margin-bottom: 20rpx;
}
.pd {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.footer {
	padding: 20rpx;
	position: fixed;
	bottom: 50rpx;
	left: 0;
	width: 100%;
	// background: #fff;
	font-size: 30rpx;
	.allprice {
		text:first-child {
			font-size: 36rpx;
		}
	}
	.btns {
		width: 701rpx;
		height: 80rpx;
		
		border-radius: 40rpx;
		color: #ffffff;
	}
}
.goods_content {
	width: 320rpx;
	height: 140rpx;
	justify-content: space-between;
	margin-left: 20rpx;
	text:first-child {
		font-size: 26rpx;
		color: #333333;
	}

	text:last-child {
		font-size: 26rpx;
		color: #999999;
		font-weight: bold;
	}
}

.goods_price {
	flex: 1;
	align-items: flex-end;
	height: 140rpx;
	text:first-child {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
	}
}
</style>
